{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.css' %}"/>
</head>
<style>
    #center {
        margin-top: 5%;
        width: 96%;
        height: 96%;
        border: 1px;
    }

    img {
        margin: auto;
        margin-left: 30%;
        height: 40%;
        width: 40%;
        position: relative;
        top: 10%;
    }

    input {

        width: 85%;
        height: 30px;
        border-width: 2px;
        border-radius: 5px;
        border-color: #00c4ff;
        border-bottom-color: #2C7EEA;
        color: #586e75;
        font-size: 15px;

    }

    button {
        width: 10%;
        height: 35px;
        border-width: 0px;
        margin-left: 3%;
        border-radius: 10px;
        background: #1E90FF;
        cursor: pointer;
        outline: none;
        font-family: Microsoft YaHei;
        color: white;
        font-size: 17px;
    }
        button:hover {
        background-color: #1E90FF;
        box-shadow: 0 4px 0 powderblue;
    }
</style>
<body>
{% csrf_token %}
<form method="post" action="{% url "Blog:Save" %}" enctype="multipart/form-data">
    <div class="form-group">
        <div>
            <input type="text" name="blogname" placeholder="请输入文章标题" required>
            <button type="submit" id="submit">发布文章</button>
        </div>
        <br>
        <div id="editormd">
            {% csrf_token %}
            <textarea style="display:none;" name="blogbody" id="blogeditor"></textarea>
        </div>
    </div>

</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="{% static 'mdeditor/editormd.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        var editor = editormd("editormd", {
            width  : "100%",
            height : "800",
            path   : "{% static 'mdeditor/lib/' %}",
            placeholder: "请开始你的书写之旅",
            //增加图片上传配置
            imageUpload    : true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/Blog/Upload/",
            required:true,
            saveHTMLToTextarea : true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,

        });

    });
    var blogeditor = document.getElementById("blogeditor");
    blogeditor.required = true;
    var button = document.getElementById("submit");
    button.addEventListener("click",()=>{
        if(blogeditor.value==''){
            alert("博客内容不能为空");
        }
    });
</script>
{{ tips }}
</body>
</html>
